<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;background-color: #FF1414;">
			<uni-icons type="arrowleft" size="20" color="#FFFFFF" style="margin: 0 259rpx 0 30rpx;" @click="backTo()"></uni-icons>
			<text style="font-size: 32rpx;color: #fff;">我的下线</text>
		</view>
		<!-- 我的下线 -->
		<view class="head">
			<view class="left">累计佣金（元）</view>
			<view class="right">+0.00</view>
		</view>
		<view class="list-header">
			<view>下线</view>
			<view>生成收益</view>
		</view>
		<block v-if="isShow">
			<scroll-view scroll-y="true">
				<view class="fansInfo" v-for="(item,index) in storeList" :key="index">
					<view class="userImg">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="userName">
						<view>{{item.username}}</view>
						<view class="createDate">{{item.create_time}}</view>
					</view>
					<view class="userScore">
						<text>{{item.score}}</text>
					</view>
				</view>
			</scroll-view>

		</block>
		<block v-else>
			<text class="noting">暂无下线</text>
		</block>

	</view>
</template>
<script>
	import {
		Storage
	} from '@/static/libs/utils.js'
	export default {
		data() {
			return {
				token: '',
				isActive: 0,
				navList: [{
						index: 0,
						title: '一级 (9)'
					},
					{
						index: 1,
						title: '二级 (16)'
					}
				],
				storeList: '',
				isShow: false
			}
		},
		onLoad() {
            
		},
		mounted() {
			this.token = Storage.get('token');
			this.getStoreList()
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
			getStoreList() {

				this.$request.get(
						`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=5b79504b752644bac4f45901b300623f&controller=distribution.get_head_child_headlist&keyword=&token=${this.token}&page=1`
					)
					.then(res => {
						console.log('粉丝',res);
						this.storeList = res.data.data
						if (res.data.length == 0) {
							this.isShow = false
						} else {
							this.isShow = true
						}
					})
			}
		}
	}
</script>
<style lang="scss">
	.head {
		// width: 100%;
		//height: 128rpx; 
		line-height: 4;
		background: linear-gradient(180deg, #fa2516 0%, #FF7979 100%);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		color: #FFFFFF;

		.left {
			font-size: 32rpx;
			font-weight: bold;
		}

		.right {
			font-size: 36rpx;
			font-weight: 400;
		}
	}

	.list-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 84rpx;
	}

	.fansInfo {
		display: flex;
		padding: 15rpx;
		position: relative;
		
		.userImg {
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.userName {
			margin-left: 15rpx;

			.createDate {
				margin-top: 20rpx;
			}
		}
		.userScore{
			height: 100rpx;
			line-height: 100rpx;
			position: absolute;
			right: 50rpx;
			
		}
	}



	.nav {
		height: 93rpx;
		line-height: 2;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 53rpx;
		padding-right: 395rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #E5E5E5;
	}

	.navBar {
		font-size: 28rpx;
		font-weight: 500;
		color: #1B1B1B;
	}

	.active {
		position: relative;
	}

	.active::after {
		content: '';
		position: absolute;
		background: #F61B00;
		width: 44rpx;
		height: 6rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}

	.content {
		line-height: 2;
		padding-left: 30rpx;
		padding-top: 25rpx;
		border-bottom: 2rpx solid #E5E5E5;
		display: flex;
		flex-direction: row;

		.logo {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		.store {
			display: flex;
			flex-direction: column;
			margin-left: 22rpx;
			justify-content: space-between;
			line-height: 50rpx;

			.txt1 {
				font-size: 28rpx;
				font-weight: 500;
				color: #1B1B1B;
			}

			.txt2 {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.noting {
		display: block;
		height: 200rpx;
		line-height: 200rpx;
		color: #ccc;
		text-align: center;
	}
</style>
